<template>
  <view class="service-container">
    <image class="bg-logo" src="@/static/image/logo_bg.png" />
    <!-- tabbar -->
    <view class="topbar" :style="topbarStyle">
      <view class="topbar-title">服务</view>
    </view>
    <!-- main -->
    <view class="main" :style="mainStyle">
      <view v-for="(typeItem, typeIndex) in funcList" :key="typeIndex" class="section" :style="typeIndex === 0 ? 'border: none' : ''">
        <view class="section-title">
          <text class="section-title-important">{{ typeItem.title }}</text>
					{{ typeItem.titleSuffix }}
          <text class="section-title-subTitle" :style="typeIndex === 0 ? 'color: #e2f0ff' : ''">{{ typeItem.subTitle }}</text>
        </view>
        <view class="section-content" :style="typeIndex === funcList.length - 1 ? 'margin-bottom: 0' : ''">
          <navigator v-for="(item, index) in typeItem.itemList" :key="index" class="section-content-item" hover-class="none" :url="item.url">
              <image mode="aspectFit" class="section-content-item-icon" :src="item.icon"></image>
            <text class="section-content-item-text">{{ item.label }}</text>
          </navigator>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
	import { onMounted, reactive } from 'vue'
  import car_check from '@/static/image/service/car_check.png'
  import gap_station from '@/static/image/service/gap_station.png'
	import charge_station from '@/static/image/service/charge_station.png'
	import repair_station from '@/static/image/service/repair_station.png'
	import park_station from '@/static/image/service/park_station.png'
	import car_breakRule from '@/static/image/service/car_breakRule.png'
	import car_order from '@/static/image/service/car_order.png'
	import car_check2 from '@/static/image/service/car_check2.png'
	import person_law from '@/static/image/service/person_law.png'
	import car_search from '@/static/image/service/car_search.png'
	import car_money from '@/static/image/service/car_money.png'
	import car_insurance from '@/static/image/service/car_insurance.png'
	import year_calculator from '@/static/image/service/year_calculator.png'
	import pilot_lamp from '@/static/image/service/pilot_lamp.png'
	
	
	// const imageMap = {};
	// onMounted(() => {
	 //  const imageFiles = import.meta.glob('/static/image/service/*.png');
		// console.log('imageFiles', imageFiles);
	 //  Object.keys(imageFiles).forEach((path) => {
		// console.log('path', path);
	 //    const imageName = path.split('/').pop().split('.')[0];
	 //    imageMap[imageName] = imageFiles[path];
	 //  });
		// console.log('imageMap', imageMap);
	// });
	
  const { globalData } = getApp();
  const topbarStyle = `height: ${globalData.navBarHeight}px; padding-top: ${globalData.statusBarHeight}px`;
  const mainStyle = `padding-top: ${globalData.navBarHeight + globalData.statusBarHeight + 12}px`;
  const funcList = reactive([
    {
      title: '交管',
      titleSuffix: '服务',
      subTitle: 'CARS',
      itemList: [
        {
          label: '车辆年检',
          icon: car_check2,
          iconColor: '#333333',
          url: '/pages/index?indexPageActive=1'
        },
        {
          label: '违章查缴',
          icon: car_breakRule,
          iconColor: '#333333',
          url: '/pages/index?indexPageActive=1'
        },
        {
          label: '罚单缴费',
          icon: car_order,
          iconColor: '#333333',
          url: '/pages/index?indexPageActive=1'
        },
        {
          label: '驾犯查询',
          icon: person_law,
          iconColor: '#333333',
          url: '/pages/index?indexPageActive=1'
        }
      ]
    },
    {
      title: '位置',
      titleSuffix: '服务',
      subTitle: 'POS',
      itemList: [
        {
          label: '年检站',
          icon: car_check,
          iconColor: '#333333',
          url: '/pages/index?indexPageActive=1'
        },
        {
          label: '加油站',
          icon: gap_station,
          iconColor: '#333333',
          url: '/pages/index?indexPageActive=1&tabIndex=1'
        },
        {
          label: '充电站',
          icon: charge_station,
          iconColor: '#333333',
          url: '/pages/index?indexPageActive=1&tabIndex=2'
        },
        {
          label: '维修保养',
          icon: repair_station,
          iconColor: '#333333',
          url: '/pages/index?indexPageActive=1&tabIndex=3'
        },
        {
          label: '停车场',
          icon: park_station,
          iconColor: '#333333',
          url: '/pages/index?indexPageActive=1&tabIndex=4'
        }
      ]
    },
    {
      title: '查询',
      titleSuffix: '服务',
      subTitle: 'SEARCH',
      itemList: [
        {
          label: '车况查询',
          icon: car_search,
          iconColor: '#333333',
          url: '/pages/index?indexPageActive=1'
        },
        {
          label: '车辆估值',
          icon: car_money,
          iconColor: '#333333',
          url: '/pages/index?indexPageActive=1'
        },
        {
          label: '年检计算',
          icon: year_calculator,
          iconColor: '#333333',
          url: '/pages/index?indexPageActive=1'
        },
		{
		  label: '指示灯',
		  icon: pilot_lamp,
		  iconColor: '#333333',
		  url: '/pages/index?indexPageActive=1'
		},
      ]
    },
    {
      title: '金融',
      titleSuffix: '服务',
      subTitle: 'FINANCE',
      itemList: [
        {
          label: '车险购买',
          icon: car_insurance,
          iconColor: '#333333',
          url: '/pages/index?indexPageActive=1'
        },
      ]
    },
  ])
	console.log('funList', funcList);

</script>

<style lang="scss">
  .service-container {
    background: linear-gradient(to bottom, #0055a5 0, #f7f7f7 520rpx);

    .bg-logo {
      position: absolute;
      top: -3%;
      width: 800rpx;
      height: 720rpx;
      right: 0;
    }

    .topbar {
      z-index: 1;
      position: fixed;
      width: 100%;
      // background-color: $uni-bg-color;
      @include flex-row(center, center);
    }
		
		.main {
			padding: 12px;
      position: relative;

      .section {
        margin-bottom: 18px;
        border-bottom: 1px solid #efefef;
      }

			.section-title {
			  height: 28px;
        display: flex;
        align-items: center;
        font-weight: bold;
			  color: $uni-text-color;

        &-subTitle {
          color: #1c85fe;
          opacity: 0.2;
          font-weight: bold;
          transform: translate(-10%, 30%);
        }

        &-important {
          color: $uni-color-primary;
        }
			
			  &::before {
			    content: '';
          display: inline-block;
			    margin-right: 6px;
			    width: 4px;
			    height: 100%;
			    border-radius: 2px;
			    background: $uni-color-gradient-blue;
			  }
			}

      .section-content  {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        // margin: 14px 0 18px 0;
        margin-top: 14px;
        padding: 12px;
        padding-bottom: 6px;
        border-radius: 8px;
        // background-color: $uni-bg-color;
        // box-shadow: 0px 4px 5px 0px rgba(0, 0, 0, 0.02);

        &-item {
          @include flex-column(space-between, center);
          margin-bottom: 8px;

          &-icon {
            @include size(100rpx)
          }

          &-text {
            font-size: 14px;
            margin-top: 6px;
          }
        }
      }
    }
  }
</style>
